<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Welcome to Tauri!</title>
		<style>
			:root {
				background-color: #f0f0f2;
				font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
					Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

				--color-on-primary: white;
				--color-primary: hsl(205, 85%, 40%);
				--color-primary-hightlight: hsl(205, 85%, 35%);
			}

			button,
			input,
			textarea,
			select {
				font: inherit;
			}

			body {
				display: flex;
				flex-direction: column;
				margin: 0;
				height: 100vh;
			}

			.title {
				margin-top: 3em;
				margin-bottom: 2em;
				text-align: center;
			}

			.form-and-message {
				background-color: aliceblue;
				padding: 1em;
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 1em;
			}

			.form-and-message > #form {
				display: flex;
				justify-content: center;
				gap: 1em;
			}

			.form-and-message > #message {
				display: flex;
				justify-content: center;
			}

			.form-and-message > #form input {
				padding: 0.5em 0.8em;
				border: 1px solid hsl(0, 0%, 60%);
				outline: none;
				min-width: 0;
			}
			.form-and-message > #form input:focus {
				border-color: var(--color-primary);
			}

			.form-and-message > #form button {
				appearance: none;
				border: none;
				cursor: pointer;
				outline: none;
				padding: 0.4em 1em;
				color: var(--color-on-primary);
				background-color: var(--color-primary);
				display: inline-flex;
				align-items: center;
			}
			.form-and-message > #form button:hover,
			.form-and-message > #form button:focus {
				background-color: var(--color-primary-hightlight);
			}
		</style>
		<script type="module">
			const { invoke } = window.__TAURI__.core

			const form = document.querySelector('#form')
			const nameEl = document.querySelector('#name')
			const messageEl = document.querySelector('#message')

			form.addEventListener('submit', async (e) => {
				e.preventDefault()

				const name = nameEl.value
				const newMessage = await invoke('greet', { name })
				messageEl.textContent = newMessage
			})
		</script>
	</head>
	<body>
		<h1 class="title">Welcome to Tauri!</h1>

		<div class="form-and-message">
			<form id="form">
				<input id="name" placeholder="Enter a name..." />
				<button>Greet</button>
			</form>
			<div id="message"></div>
		</div>
	</body>
</html>
